<template>
  <el-tag
    effect="dark"
    class="mr-15px"
    size="large"
    :closable="!props.isDetails"
    v-for="(item, index) in shopList"
    :key="item.id"
    @close="shopList!.splice(index, 1)"
    >{{ item.name }}</el-tag
  >
  <el-button @click="addShop"> <slot>添加</slot></el-button>
  <!-- 商城管理弹窗 -->
  <ShopSelectDialog ref="ShopSelectRef" @success="setShop" />
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import ShopSelectDialog from './ShopSelectDialog.vue'

defineOptions({ name: 'ShopSelect' })
// 定义属性
const props = defineProps({
  // 当前选中的商城
  modelValue: propTypes.oneOfType<any>([]).isRequired,

  isDetails: propTypes.bool.def(false)
})
// 当前的商城
const shopList = ref<EmptyArrayType>([])

/** 商城管理*/
const ShopSelectRef = ref()
// 商城选中
const addShop = () => {
  ShopSelectRef.value.open(shopList.value)
}
const setShop = (list) => {
  console.log(list)
  shopList.value = list
}
// getter
watch(
  () => props.modelValue,
  () => (shopList.value = props.modelValue),
  { immediate: true }
)

// setter
const emit = defineEmits<{
  'update:modelValue'
}>()
watch(
  () => shopList.value,
  () => emit('update:modelValue', shopList.value)
)
</script>
